<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 4: Everything's An Illusion</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">
#bg, #char {display: none;}

#canvas {
	width: 800px;
	height: 600px;
	background: #fff;
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}


</style>


<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",900);		
	}
	
	var dax=0; counter=0;
	function animation(){
		if(counter >= 6) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,800,600,0,0,800,600);
		dax=800*counter;

	}
</script>


</head>
<body onload="init()">

	<h1>FIGMENT OF THE IMAGINATION</h1>
	<h2>Chapter 4: Everything's An Illusion</h2>
	<h2>Scene 7: Simmer Down</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>

<center><img src="images/photo.png" width=800 style="margin:-5px 0 0 0;"></center>
<img id="bg" src="images/ch4/charlieroom2.png" width=800 height=600>
<img id="char" src="images/ch4/adacharlie.png">

<div id="scenetext">
<p>
"Oh no, it's back. Please stop crying Charlie. Ada's head is really, really painful right now," 
 the child did not stop. His cries were 
getting louder and louder, penetrating an abundance of discomfort into her head. After minutes of torment,
she decided to make milk for Charlie and set the kid to slumber. It was effective.
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter4Scene6.jsp" title="The Beginning"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter5.jsp" title="Proceed to Chapter 5"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

